{extend name="layout/app" /}

{block name="title"}编辑博客{/block}

{block name="css"}
<style>

</style>
{/block}

{block name="content"}
<div class="container">
    <div class="card mb-3 mt-4">
        <div class="card-body">
            <form id="form-edit" action="{:url('/blog/'.$blog_id)}">
                <meta name="csrf-token" id="__token__" content="{:token()}">
                <div id="div-msg" hidden></div>
                <div class="form-group">
                    <label for="exampleFormControlInput1">标题</label>
                    <input type="text" value="{$title}" name="title" class="form-control" id="exampleFormControlInput1">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">分类</label>
                    <select name="category_id" class="form-control" id="exampleFormControlSelect1">
<!--                        遍历并选中文章原本的分类-->
                        {volist name="categories" id="category"}
                        <option value={$category.id} {$category.id == $category_id ? 'selected' : ''}>{$category.name}</option>
                        {/volist}
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">内容</label>
                    <textarea class="form-control" name="content" id="exampleFormControlTextarea1" rows="10">{$content}</textarea>
                </div>
                <button type="button" id="btn-edit" class="btn btn-primary w-25 offset-4">发布</button>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    $(function () {
        // 显示提示信息
        $('#btn-edit').click(function () {
            var form = $('#form-edit');
            $.ajax({
                url: form.attr('action'),
                type: 'put',
                data: form.serialize(),
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    if (res.code == 200){
                        notify('success', res.msg)
                        setTimeout(function (){
                            window.location.reload();
                        }, 1000);
                    } else if (res.code == 400){
                        $('#div-msg').removeAttr('hidden')
                        $('#div-msg').addClass('alert alert-danger')
                        $('#div-msg').html(`${ res.msg }`);
                        getNewToken();
                    }
                }
            })
        })

    })
</script>
{/block}
